<template>
  <view>
    <view class="relative">
      <van-cell
        title="不限品牌"
        v-if="type === 'one'"
        @tap="() => check({ brand_id: '', brand_name: '不限品牌' })"
      ></van-cell>
      <van-index-bar :index-list="indexList" :sticky="false">
        <block v-for="(item, index) in carBrandList" :key="index">
          <van-index-anchor :index="item.group_name"></van-index-anchor>
          <view
            v-for="iitem in item.brand_list"
            :key="iitem.brand_id"
            class="garage-index"
            @tap="() => check(iitem)"
          >
            <view class="cell1">
              <view class="fl">
                <image
                  v-if="iitem.brand_icon"
                  :src="iitem.brand_icon"
                  mode="widthFix"
                />
                <image v-else src="/images/biao.png" mode="widthFix" />
              </view>
              <view class="fr" v-if="show">
                {{ iitem.brand_name }}
              </view>
            </view>
          </view>
        </block>
      </van-index-bar>
      <view class="sub" v-if="!show">
        <view class="sub-t" :animation="animation">
          <block v-for="(item, index) in carSeriesList" :key="index">
            <van-index-anchor :index="item.group_name"></van-index-anchor>
            <view
              v-for="iitem in item.series_list"
              :key="iitem.group_id"
              class="cell-title"
            >
              <van-cell
                :title="iitem.group_name"
                is-link="true"
                @click="() => toModel(iitem)"
              ></van-cell>
            </view>
          </block>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
import Taro, { getCurrentInstance, navigateBack } from '@tarojs/taro'
import { getCarBrand, getCarSeries } from '@requests/carLib'
import { navigateTo } from '@utils/'
import { getParam } from '@utils/'

export default {
  name: 'ReleaseCars',
  data() {
    return {
      show: true,
      value: '',
      type: '',
      event: '',
      indexList: [],
      animationObj: Taro.createAnimation({
        duration: 300,
        timingFunction: 'ease',
        delay: 0
      }),
      animation: null,
      carBrandList: [],
      currentBrand: {},
      carSeriesList: []
    }
  },
  created() {
    this.type = getParam('type')
    this.event = getParam('event')
    this.getCarBrand()
  },
  computed: {},
  methods: {
    getCarBrand() {
      getCarBrand()
        .then(res => {
          this.carBrandList = res.result.list
          this.indexList = res.result.list.map(item => {
            return item.group_name
          })
        })
        .catch(e => e)
    },
    getSeriesList() {
      getCarSeries(this.currentBrand.brand_id)
        .then(res => {
          this.carSeriesList = res.result.list
          setTimeout(() => {
            this.animationObj.width('100%').step()
            this.animation = this.animationObj.export()
          }, 10)
        })
        .catch(e => e)
    },
    check(brand) {
      if (this.type === 'one') {
        navigateBack({
          success: () => {
            Taro.eventCenter.trigger(this.event, brand)
          }
        })
        return
      }
      this.currentBrand = brand
      this.show = false
      this.indexList = []
    },
    toModel(serie) {
      navigateTo('business/car-lib/model', {
        car_series_id: serie.group_id,
        car_series_name: serie.group_name,
        car_brand_id: this.currentBrand.brand_id,
        car_brand_name: this.currentBrand.brand_name,
        car_brand_logo: this.currentBrand.brand_icon,
        event: this.event
      })
    }
  },
  watch: {
    currentBrand() {
      this.getSeriesList()
    }
  }
}
</script>

<style>
.garage-index {
  padding: 0 0.9rem;
}
.cell1 {
  overflow: hidden;
  border-bottom: 2rpx solid rgba(238, 238, 238, 0.5);
}
.cell1 .fl {
  float: left;
  width: 90rpx;
  height: 90rpx;
  text-align: center;
}
.cell1 .fl image {
  width: 72rpx;
  margin-top: 9rpx;
}
.cell1 .fr {
  float: left;
  padding-left: 30rpx;
  height: 90rpx;
  line-height: 90rpx;
  font-size: 0.865rem;
  margin-top: 0;
}
.relative {
  position: relative;
}
.sub {
  position: fixed;
  left: 120rpx;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  overflow: auto;
  background: #f9f9f9;
}
.sub-t {
  width: 0;
  margin: 0 auto;
  overflow: hidden;
}
.cell-title {
  margin-left: 30rpx;
}
</style>
